<template>
  <div class="addAddress">
    <van-nav-bar
      title="新增地址"
      left-arrow
      @click-left="$router.back()"
      class="navBar"
    />

    <van-form @submit="onSubmit" class="form" ref="form">
      <van-field
        placeholder="请填写你的姓名"
        v-model="formData.name"
        :rules="rules.name"
      />
      <van-field
        placeholder="请填写小区/写字楼/学校等"
        @click="$router.push('/profile/info/add/addDetail')"
        v-model="addressInfo.name"
        :rules="rules.address"
      />
      <van-field
        v-model="formData.address_detail"
        :rules="rules.address_detail"
        placeholder="请填写详细送餐地址"
      />
      <van-field
        v-model="formData.phone"
        :rules="rules.phone"
        placeholder="请填写能够联系到您的手机号"
      />
      <van-field
        v-model="formData.phone_bk"
        :rules="rules.phone_bk"
        placeholder="请填写备用联系电话（选填）"
      />
      <div>
        <van-button block type="info" native-type="submit" class="submit"
          >确 定 新 增</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { addAddress } from '@/api/profile'

// 自定义验证规则
const validator = (val) => {
  if (val) {
    return /^1[3-9]\d{9}$/.test(val)
  }
}

export default {
  name: 'addAll',
  data() {
    return {
      formData: {
        name: '',
        address_detail: '',
        phone: '',
        phone_bk: '',
        sex: '1',
        tag: '公司',
        tag_type: '4',
      },
      rules: {
        name: [{ required: true, trigger: 'onBlur' }],
        address: [{ required: true, trigger: 'onBlur' }],
        address_detail: [{ required: true, trigger: 'onBlur' }],
        phone: [
          { required: true, trigger: 'onBlur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            trigger: 'onBlur',
            message: '手机号格式错误!',
          },
        ],
        phone_bk: [{ validator, message: '请输入正确内容' }],
      },
    }
  },
  methods: {
    async onSubmit() {
      await this.$refs.form.validate()
      const { data } = await addAddress({
        ...this.formData,
        user_id: this.userInfo.user_id,
        address: this.addressInfo.address,
        geohash: this.addressInfo.geohash,
      })
      if (data.status === 1) {
        this.$toast.success('添加地址成功')
        this.$store.commit('setAddress', {})
        this.$router.back()
        this.formData = {
        name: '',
        address_detail: '',
        phone: '',
        phone_bk: '',
        sex: '1',
        tag: '公司',
        tag_type: '4',
      }
      } else {
        this.$toast.fail('添加地址失败')
      }
    },
  },
  computed: {
    ...mapState(['addressInfo', 'userInfo']),
  },
}
</script>

<style lang="less" scoped>
.addAddress {
  /deep/.navBar {
    margin-bottom: 10px;
    background-color: #4e7ee8;
    .van-nav-bar__title,
    .van-icon-arrow-left {
      font-size: 20px;
      color: #fff;
    }
  }
  .form {
    padding: 10px;
    background-color: #fff;
    .van-field {
      margin-bottom: 10px;
      background-color: #f5f5f5;
      border: 1px solid #ddd;
    }
    .submit {
      font-size: 20px;
    }
  }
}
</style>
